import React from 'react'
import Navbar from '../../compoents/Navbar'
import { useNavigate, useParams } from 'react-router-dom'
import style from './index.module.css'

function Index() {
  const navigate = useNavigate()
  const { id } = useParams()
  
  // 模拟检验报告数据 - 根据id获取不同的报告
  const getReportData = (reportId: string) => {
    const reports = [
      {
        title: "血常规 (成人)",
        patientInfo: {
          name: "王小柯",
          gender: "女",
          age: "28岁"
        },
        examinationInfo: {
          referringPhysician: "王小小",
          department: "门诊化验科",
          examinationTime: "2020-01-01 10:20:36",
          reportTime: "2020-01-20 20:20:30",
          category: "门诊/住院"
        },
        results: [
          {
            itemName: "无机磷酸盐",
            result: "1.25 (mmol/L)",
            referenceValue: "0.85 - 1.51",
            isAbnormal: false,
            isHigh: false,
            isLow: false
          },
          {
            itemName: "降钙素原测定",
            result: "0.27 (ng/ml)",
            referenceValue: "≤1.0",
            isAbnormal: false,
            isHigh: false,
            isLow: false
          },
          {
            itemName: "高敏C反应蛋白",
            result: "5.48 (mg/L)",
            referenceValue: "≤5.00",
            isAbnormal: true,
            isHigh: true,
            isLow: false
          }
        ],
        personnel: {
          examiner: "李医生",
          reviewer: "王医生",
          remarks: "此结果仅作参考,以医院纸质报告为准"
        }
      },
      {
        title: "肝功三项",
        patientInfo: {
          name: "王小柯",
          gender: "女",
          age: "28岁"
        },
        examinationInfo: {
          referringPhysician: "王小小",
          department: "门诊化验科",
          examinationTime: "2020-01-01 10:20:36",
          reportTime: "2020-01-20 20:20:30",
          category: "门诊/住院"
        },
        results: [
          {
            itemName: "谷丙转氨酶",
            result: "25 (U/L)",
            referenceValue: "5 - 40",
            isAbnormal: false,
            isHigh: false,
            isLow: false
          },
          {
            itemName: "谷草转氨酶",
            result: "18 (U/L)",
            referenceValue: "8 - 40",
            isAbnormal: false,
            isHigh: false,
            isLow: false
          },
          {
            itemName: "总胆红素",
            result: "12.5 (μmol/L)",
            referenceValue: "3.4 - 17.1",
            isAbnormal: false,
            isHigh: false,
            isLow: false
          }
        ],
        personnel: {
          examiner: "张医生",
          reviewer: "王医生",
          remarks: "此结果仅作参考,以医院纸质报告为准"
        }
      }
    ]
    
    return reports[parseInt(reportId) || 0] || reports[0]
  }

  const reportData = getReportData(id || '0')
  console.log('检验报告ID:', id, '报告数据:', reportData);

  return (
    <div className={style.container}>
      <Navbar title="检验报告详情" showBack={true} onBack={() => navigate(-1)} />
      
      <div className={style.reportCard}>
        {/* 报告标题 */}
        <div className={style.reportTitle}>
          {reportData.title}
        </div>

        {/* 患者基本信息 */}
        <div className={style.patientBasicInfo}>
          {reportData.patientInfo.name} {reportData.patientInfo.gender} {reportData.patientInfo.age}
        </div>

        {/* 检查详细信息 */}
        <div className={style.examinationDetails}>
          <div className={style.detailRow}>
            <span className={style.detailLabel}>送检医师:</span>
            <span className={style.detailValue}>{reportData.examinationInfo.referringPhysician}</span>
            <span className={style.detailLabel}>送检科室:</span>
            <span className={style.detailValue}>{reportData.examinationInfo.department}</span>
          </div>
          <div className={style.detailRow}>
            <span className={style.detailLabel}>送检时间:</span>
            <span className={style.detailValue}>{reportData.examinationInfo.examinationTime}</span>
          </div>
          <div className={style.detailRow}>
            <span className={style.detailLabel}>报告时间:</span>
            <span className={style.detailValue}>{reportData.examinationInfo.reportTime}</span>
          </div>
          <div className={style.detailRow}>
            <span className={style.detailLabel}>报告类别:</span>
            <span className={style.detailValue}>{reportData.examinationInfo.category}</span>
          </div>
        </div>

        {/* 检验结果区域 */}
        <div className={style.resultsSection}>
          <div className={style.resultsHeader}>
            <div className={style.sectionTitle}>检验结果</div>
            <div className={style.copyAction}>
              <span className={style.copyText}>申请检验复印 &gt;</span>
            </div>
          </div>
          
          {/* 图例说明 */}
          <div className={style.legend}>
            <div className={style.legendItem}>
              <div className={style.legendSquare}></div>
              <span>异常指标</span>
            </div>
            <div className={style.legendItem}>
              <span className={style.legendArrow}>▲</span>
              <span>指标偏高</span>
            </div>
            <div className={style.legendItem}>
              <span className={style.legendArrow}>▼</span>
              <span>指标偏低</span>
            </div>
          </div>

          {/* 结果表格 */}
          <div className={style.resultsTable}>
            <div className={style.tableHeader}>
              <div className={style.headerCell}>项目名称</div>
              <div className={style.headerCell}>结果</div>
              <div className={style.headerCell}>参考值</div>
            </div>
            {reportData.results.map((item, index) => (
              <div key={index} className={style.tableRow}>
                <div className={style.tableCell}>{item.itemName}</div>
                <div className={`${style.tableCell} ${style.resultCell}`}>
                  {item.result}
                  {item.isHigh && <span className={style.highArrow}>▲</span>}
                  {item.isLow && <span className={style.lowArrow}>▼</span>}
                </div>
                <div className={style.tableCell}>{item.referenceValue}</div>
              </div>
            ))}
          </div>
        </div>

        {/* 人员信息 */}
        <div className={style.personnelSection}>
          <div className={style.personnelRow}>
            <span className={style.personnelLabel}>检测人:</span>
            <span className={style.personnelValue}>{reportData.personnel.examiner}</span>
            <span className={style.personnelLabel}>审核人:</span>
            <span className={style.personnelValue}>{reportData.personnel.reviewer}</span>
          </div>
          <div className={style.remarks}>
            <span className={style.remarksLabel}>备注:</span>
            <span className={style.remarksValue}>{reportData.personnel.remarks}</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
